<!DOCTYPE html>
<html>
	<head>	
		<title>Web OPM</title>

		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.css" />
		<link rel="stylesheet" href="css/jquery-ui.css" />
		<link rel="stylesheet" href="css/editor.css" />
		
		<link rel="icon" type="image/png" href="img/logo.png" />
		
		<meta name="application-name" content="Web OPM" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    	<meta name="description" content="OPM conceptual modeling tool simulation" />
    	<meta name="author" content="Technion" />
    	<meta charset="utf-8">
	</head>
	
	<script type="text/javascript">
  		var _gaq = _gaq || [];
  		_gaq.push(['_setAccount', 'UA-29544788-1']);
  		_gaq.push(['_trackPageview']);

  		(function() {
    		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  		})();
	</script>
	
	<body>
		<div class="navbar navbar-fixed-top">
  			<div class="navbar-inner">
  				<div class="container-fluid">
  					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
            			<span class="icon-bar"></span>
          			</a>
          			<a class="brand" href="#" style="color: LimeGreen">Web OPM</a>
          			<div class="nav-collapse">
          				<ul class="nav">
          					<li class="dropdown">
          						<a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
          						<ul class="dropdown-menu">
          							<li><a href="#">New Model...</a></li>
          							<li><a href="#">Open Model...</a></li>
          							<li><a href="#">Load Model from Repository</a></li>
          							<li><a href="#">Close Model</a></li>
          							<li class="divider"></li>
          							<li><a href="#">Save Model...</a></li>
          							<li><a href="#">Save As...</a></li>
          							<li class="divider"></li>
          							<li><a href="#">Print</a></li>
          							<li><a href="#">Properties</a></li>
          							<li class="divider"></li>
          							<li><a href="#">Login...</a></li>
          							<li><a href="#">Sign up...</a></li>
          							<li class="divider"></li>
          							<li><a href="#">Exit</a></li>
          						</ul>
          					</li>
          					<li class="divider-vertical"></li>
          					<li class="dropdown">
          						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
          						<ul class="dropdown-menu">
          							<li><a href="#">Undo</a></li>
          							<li><a href="#">Redo</a></li>
          							<li class="divider"></li>
          							<li><a href="#">Cut</a></li>
          							<li><a href="#">Copy</a></li>
          							<li><a href="#">Paste</a></li>
          							<li><a href="#">Delete</a></li>
          						</ul>
          					</li>
          					<li class="divider-vertical"></li>
          					<li class="dropdown">
          						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Help</a>
          						<ul class="dropdown-menu">
          							<li><a href="#">Help...</a></li>
          							<li><a href="#">F.A.Q.</a></li>
          							<li><a href="#">OPM Tutorial</a></li>
          							<li><a href="#">Examples</a></li>
          							<li class="divider"></li>
          							<li><a href="#">About</a></li>
          						</ul>
          					</li>
          				</ul>
          				<form class="navbar-search pull-left">
  							<input type="text" class="search-query" placeholder="Search">
						</form>
						<div class="btn-group pull-right">
							<a class="btn" href="#"><i class="icon-user"></i> User</a>
							<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="#"><i class="icon-inbox"></i> Inbox</a></li>
								<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
								<li class="divider"></li>
								<li><a href="#"><i class="icon-off"></i> Sign Out</a></li>
							</ul>
						</div>
          			</div>			
  				</div>
  			</div>
		</div>
		
		<header class="header">
		
			<div class="modal hide" id="model-rename">
				<div class="modal-header">
					<a class="close" data-dismiss="modal">&times;</a>
					<h2>Rename the Model</h2>
				</div>
				<div class="model-body">
					<p>Please, enter a new name of the model:</p>
					<form>
						<input type="text"></input>
					</form>
				</div>
				<div class="modal-footer">
					<a class="btn" data-dismiss="modal">Cancel</a>
					<a class="btn btn-success">Apply</a>
				</div>
			</div>
			
			<table class="social">
				<tr>
					<td><h2><a id="model-name" data-toggle="modal" rel="tooltip" title="Click to Rename" onclick="rename();">New Model</a></h2></td>
					<td><h2 style="color: grey">:</h2></td>
					<td><h2 style="color: grey">System Diagram</h2></td>
					<td style="width: 59%"></td> 	
					<td><a href="#"><img src="img/glyphicons/glyphicons_346_google_plus.png" alt="google plus"/></a></td>
					<td><a href="#"><img src="img/glyphicons/glyphicons_320_facebook.png" alt="facebook"/></a></td>													
					<td><a href="#"><img src="img/glyphicons/glyphicons_321_twitter_t.png" alt="twitter"/></a></td>
					<td><a href="#"><img src="img/glyphicons/glyphicons_337_linked_in.png" alt="linked in"/></a></td>
					<td><a href="#"><img src="img/glyphicons/glyphicons_327_rss.png" alt="rss feed"/></a></td>
				</tr>
			</table>
							
		</header>

		<div class="subnav subnav-fixed">
			<ul class="nav nav-pills">
				<li><a href="#" rel="tooltip" title="Create New Model"><i class="icon-file"></i></a></li>
				<li><a href="#" rel="tooltip" title="Open Model"><i class="icon-folder-open"></i></a></li>
				<li><a href="#" rel="tooltip" title="Print Current Model"><i class="icon-print"></i></a></li>
				<li><a href="#" rel="tooltip" title="Download Current Model"><i class="icon-download-alt"></i></a></li>
				<li class="divider-vertical"></li>
				<li><a href="#"><i class="icon-font"></i></a></li>
				<li><a href="#"><i class="icon-bold"></i></a></li>
				<li><a href="#"><i class="icon-italic"></i></a></li>
				<li class="divider-vertical"></li>
				<li><a href="#"><i class="icon-align-left"></i></a></li>
				<li><a href="#"><i class="icon-align-center"></i></a></li>
				<li><a href="#"><i class="icon-align-right"></i></a></li>
				<li><a href="#"><i class="icon-align-justify"></i></a></li>
				<li class="divider-vertical"></li>
				<li><a href="#" rel="tooltip" title="Zoom In" onclick="diagramZoom(1.25)"><i class="icon-zoom-in"></i></a></li>
				<li><a href="#" rel="tooltip" title="Zoom Out" onclick="diagramZoom(0.8)"><i class="icon-zoom-out"></i></a></li>
				<li><a href="#"><i class="icon-cog"></i></a></li>
			</ul>
				
		</div>
		
		<div id="opl-panel"></div>
		<p class="slide">
			<h6><a href="#" class="btn btn-inverse btn-slide" rel="tooltip" title="Click to show OPL">OPL <i class="icon-resize-vertical icon-white"></i></a></h6>
		</p>
		
		<div id="container-model" class="container-fluid" style="margin-top: 20px;">
			<div class="row" style="height: 500px;">
				<div class="span1 drag">
					<div class="well sidebar-nav" style="padding: 0px;">
					<table style="">
						<tr><th colspan="2"><h6>Things</h6></th></tr>
						<tr><td colspan="2"><a href="#" rel="tooltip" title="Add Object" onclick="addObject();"><img src="img/glyphicons/glyphicons_094_vector_path_square.png" alt="object"/></a></td></tr>
						<tr><td colspan="2"><a href="#" rel="tooltip" title="Add Process" onclick="addProcess();"><img src="img/glyphicons/glyphicons_095_vector_path_circle.png" alt="process"/></a></td></tr>
						<tr><td colspan="2"><a href="#" rel="tooltip" title="Add State" onclick="addState();"><img src="img/glyphicons/glyphicons_094_vector_path_square.png" alt="state"/></a></td></tr>
						<tr><td colspan="2"></td></tr>
						<tr><th colspan="2"><h6>Links</h6></th></tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td><i class="icon-qrcode"></i></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td><i class="icon-qrcode"></i></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td><i class="icon-qrcode"></i></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td><i class="icon-qrcode"></i></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td><i class="icon-qrcode"></i></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td><i class="icon-qrcode"></i></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td></td>
						</tr>
						<tr>
							<td><i class="icon-qrcode"></i></td>
							<td></td>
						</tr>		
					</table>
					</div>
				</div>

				<div class="span2 drag">
					<div class="well resize">
						<h6>OPD Tree<a href="#" class="close" onclick="$('.span2').css('display', 'none');">&times;</a></h6>
					</div>
				</div>

				<div class="canvas">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="100%" height="100%">
						<script type="text/javascript" xlink:href="js/editor-svg.js"/>
						<g id="sd" transform="matrix(1 0 0 1 0 0)"></g>
					</svg>
					
				</div>
				
			</div>
			
			<div class="pagination pagination-centered">
				<ul>
					<li><a href="#">&larr; Prev</a></li>
					<li class="active"><a href="#">SD</a></li>
					<li><a href="#">Next &rarr;</a></li>
				</ul>
			</div>
			
			<hr>
		</div>
	</div>
		
	<footer class="footer">
		<p>Web OPM: online case tool for <a href="//en.wikipedia.org/wiki/Object_Process_Methodology" target="_blank">Object-Process Methodology</a></p>
		<p>Copyright &copy 2012 Israel Institute of Technology - <a href="//www.technion.ac.il" target="_blank">Technion</a></p>
		<p style="margin-bottom: 20px;">The code is licensed under <a href="//www.gnu.org/licenses/gpl-2.0.html" target="_blank">GNU General Public License, v2</a></p>
		<p>Version 1.1.0</p>
	</footer>
	

<!-- Placed at the end of the document so to increase loading the page -->	
	<!-- 3rd party Libraries -->
		<!-- jQuery -->
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery-ui.min.js"></script>
		<!-- Bootstrap -->
		<script src="js/bootstrap.js"></script>
<!-- 	<script src="js/bootstrap-alert.js"></script>		 	-->
		<script src="js/bootstrap-button.js"></script>
<!--	<script src="js/bootstrap-carousel.js"></script>			-->
<!--	<script src="js/bootstrap-collapse.js"></script>			-->
		<script src="js/bootstrap-dropdown.js"></script>
		<script src="js/bootstrap-modal.js"></script>
<!--	<script src="js/bootstrap-popover.js"></script>			-->
<!--	<script src="js/bootstrap-scrollspy.js"></script>		-->
<!--	<script src="js/bootstrap-tab.js"></script>				-->
		<script src="js/bootstrap-tooltip.js"></script>
<!--	<script src="js/bootstrap-transition.js"></script>		-->
<!--	<script src="js/bootstrap-typeahead.js"></script>		-->
	<!-- Additional -->

	<!-- Custom JS -->
		<script src="js/editor.js"></script>	
		<script src="js/editor-svg-class.js"></script>
		<script src="js/editor-svg-util.js"></script>
		<script src="js/editor-svg.js"></script>
	
	</body>
</html>